<template>
    <div class="container">
      <div class="container--item">
        <img src="../assets/mall/staffService.png"
             class="container--img__staffService"
             alt="#">
        <div class="container--item__search" @click="search">
          <img src="../assets/mall/search.png" class="container--img__search" alt="#">
          <span>保暖内衣</span>
        </div>
      </div>
      <div class="container--item__BScroll">
        <ul class="container--item__option">
          <li class="container--item__list"
              @click="move(key)"
              ref="list"
              v-for="(item, key) in mall" :key="key">{{item.name}}</li>
          <li class="container--item__move" :style="{left: left}"></li>
        </ul>
      </div>
      <div class="container--item__betterScroll">
        <div class="container--betterScroll__box">
          <recommend/>
          <Beauty/>
          <department/>
          <wristwatch/>
          <furniture/>
          <phone></phone>
          <parts></parts>
        </div>
      </div>
    </div>
</template>

<script>
import recommend from '../components/mall/recommend';
import Beauty from '../components/mall/Beauty';
import department from '../components/mall/department';
import wristwatch from '../components/mall/wristwatch';
import phone from '../components/mall/phone';
import parts from '../components/mall/parts';
import furniture from '../components/mall/furniture';
import { Throttle } from '../publicFunction';

export default {
  name: 'shoppingMall',
  components: {
    recommend,
    Beauty,
    department,
    wristwatch,
    furniture,
    phone,
    parts,
  },
  data() {
    return {
      mall: [
        { name: '推荐', componentName: 'recommend' },
        { name: '美妆护肤', componentName: 'Beauty' },
        { name: '超值百货', componentName: 'department' },
        { name: '名品腕表', componentName: 'wristwatch' },
        { name: '品质家居', componentName: 'furniture' },
        { name: '手机专区', componentName: 'phone' },
        { name: '精选配件', componentName: 'parts' },
      ],
      scroll: null,
      left: '4.1vw',
      mallScroll: null,
      swiper: null,
    };
  },
  methods: {
    move(key) {
      /* eslint-disable */
      if (key >= 2 && key <= this.mall.length - 3 ) this.scroll.scrollTo((key - 2) * -75, 0, 200);
      this.left = (key * 20) + 4.1 + 'vw';
      this.mallScroll.goToPage(key, 0, 0);
    },
    search() {
      this.$router.push({ name: 'search' })
    },
  },
  mounted() {
    this.scroll = new this.$Bs('.container--item__BScroll', {
      scrollX: true,
      scrollY: false,
      click: true,
    });
    this.$nextTick(()=>{
      if (!this.mallScroll) {
        this.mallScroll = new this.$Bs('.container--item__betterScroll', {
          scrollX: true,
          scrollY: false,
          momentum: false, // 当快速滑动时是否开启滑动惯性
          snap: {
            threshold: 0.15,
          },
          bounce: false, // 是否启用回弹动画效果
          click: true,
          probeType: 3, // 分发事件的情况
        });

        this.mallScroll.on('scroll', Throttle(() => {
          this.mallScroll.getCurrentPage().pageX < 7 ?
            this.left = ((this.mallScroll.getCurrentPage().pageX) * 20) + 4.1 + 'vw':
            this.left = (7 * 20) + 4.1 + 'vw';
          if (this.mallScroll.getCurrentPage().pageX >= 2 && this.mallScroll.getCurrentPage().pageX <= this.mall.length - 3 )
            this.scroll.scrollTo((this.mallScroll.getCurrentPage().pageX - 2) *-75, 0, 200);
        }, 100))
      } else {
        this.mallScroll.refresh();
      }
    });
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  background-color: #fff;
  .container--item{
    width: 100vw;
    position: relative;
    line-height: (86/75) + rem;
    .container--img__staffService{
      width: .5rem;
      height: .5rem;
      vertical-align: middle;
      margin-left: .5rem;
    }
    .container--item__search{
      position: absolute;
      right: .35rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
      border-radius: 4px;
      vertical-align: middle;
      height: (72/75) + rem;
      width: 80%;
      background-color: #f5f5f5;
      .container--img__search{
        vertical-align: middle;
        width: .4rem;
        height: .4rem;
        margin-left: 4%;
        margin-bottom: 2%;
      }
      span{
        font-size: .35rem;
        margin-left: .35rem;
        vertical-align: middle;
        color: #ccc;
        position: relative;
        top: -.1rem;
      }
    }
  }
  .container--item__BScroll{
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    .container--item__option{
      position: relative;
      list-style: none;
      height: (83/75) + rem;
      width: 140vw;
      .container--item__list{
        text-align: center;
        display: inline-block;
        width: 20vw;
        line-height: (86/75) + rem;
        font-size: .28rem;
        color: #686868;
      }
      .container--item__move{
        transition: left ease-in-out .3s;
        position: absolute;
        bottom: .1rem;
        width: 1.15rem;
        height: 2px;
        background-color: #176ee2;
      }
    }
  }
  .container--item__betterScroll{
    width: 100vw;
    .container--betterScroll__box{
      width: 700vw;
      vertical-align: top;
    }
  }

}
</style>
